import './rowDetail.scss';
/*eslint-disable */
import rowDetailTpl from '!html-loader!./rowDetail.html';
/*eslint-enable */

function expandDetail($compile) {
  'ngInject';

  return {
    restrict: 'A',
    controllerAs: '$ctrl',
    controller() {
      this.details = [];

      this.addDetail = ((detailHtml) => {
        this.details.push(detailHtml);
      });
    },
    link($scope, iElement, iAttrs, controller, transclude) {
      iElement.addClass('pointer expand');
      $scope.expand = false;
      $scope.colspan = iElement.parent().parent().find('th').length;

      iElement.find('td:first').prepend('<i class="icon iconfont arrow"></i>');
      const detailEle = angular.element(rowDetailTpl);
      $compile(detailEle)($scope);
      iElement.after(detailEle);

      iElement.on('click', () => {
        $scope.$apply(() => {
          $scope.expand = !$scope.expand;
          if ($scope.expand) {
            iElement.addClass('active');
          } else {
            iElement.removeClass('active');
          }
        });
      });
    },
  };
}

function hide($compile, $timeout) {
  'ngInject';

  return {
    require: '^^expand',
    restrict: 'A',
    compile(tElement, tAttr) {
      tElement.hide();
      // tAttr.$set('ngIf', 'false');
      // const compiled = $compile(tElement);

      return function linkFn($scope, iElement, iAttrs, controller, transclude) {
        $timeout(() => {
          controller.addDetail({
            name: iAttrs.hide,
            value: iElement.html(),
          });
        });
        // compiled($scope);
      };
    },
  };
}

export { expandDetail, hide };
